<template>
  <div class="info-pos">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">手机号码</label>
        <div type="text" class="form-control" id="formGroupExampleInput" >{{Merchant.merchantPhoneNumber}}</div>
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">账号</label>
        <div type="text" class="form-control" id="formGroupExampleInput" >{{Merchant.merchantUsername}}</div>
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">销量</label>
        <div type="text" class="form-control" id="formGroupExampleInput" >{{Merchant.salesVolume}}</div>
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">评分</label>
        <div type="text" class="form-control" id="formGroupExampleInput" >{{Merchant.shopGrade}}</div>
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput">店铺名称</label>
        <input type="text" class="form-control" id="formGroupExampleInput" :placeholder="Merchant.shopName" v-model="Merchant.shopName">
        <button type="button" class="btn btn-primary" @click="updateShopName" >修改名称</button>
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput">店铺营业状态[0休息；1营业]</label>
        <div type="text" class="form-control" id="formGroupExampleInput" >{{this.working}}</div>
        <button type="button" class="btn btn-primary" @click="updateIsWorking" >休息/工作</button>
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput">店铺描述</label>
        <input type="text" class="form-control" id="formGroupExampleInput"
               :placeholder="Merchant.shopDescription" v-model="Merchant.shopDescription">
        <button type="button" class="btn btn-primary" @click="updateShopDescription" >修改描述</button>
      </div>
    </form>

  </div>


</template>

<script>
export default {
  name: 'MerchantInfo',
  data() {
    return {
      working: "",
      Merchant: {
        merchantPhoneNumber: "",
        merchantUsername: "",
        shopName: "",
        shopDescription: "",
        salesVolume: "",
        shopGrade: "",
        isWorking: "",
      },
    }
  },

  methods: {
    // 从数据库获取数据
    async getInfo() {
      const {data: res} = await this.$http.get('/merchant/info?phoneNumber='+localStorage.getItem("username_M"))
      this.Merchant.merchantPhoneNumber=res.data.merchantPhoneNumber
      this.Merchant.merchantUsername=res.data.merchantUsername
      this.Merchant.shopName=res.data.shopName
      this.Merchant.shopDescription=res.data.shopDescription
      this.Merchant.salesVolume=res.data.salesVolume
      this.Merchant.shopGrade=res.data.shopGrade
      this.Merchant.isWorking=res.data.isWorking
      if (this.Merchant.isWorking===1){
        this.working='营业中';
      }
      else this.working='休息中';
    },

    async updateShopName() {
      const {data: res} = await this.$http.post('/merchant/updateShopName',this.Merchant)
      await this.getInfo()
    },

    async updateIsWorking() {
      if (this.Merchant.isWorking===1){
        this.Merchant.isWorking=0;
      }
      else this.Merchant.isWorking=1;
      const {data: res} = await this.$http.post('/merchant/updateIsWorking',this.Merchant)
      await this.getInfo()
    },

    async updateShopDescription() {
      const {data: res} = await this.$http.post('/merchant/updateShopDescription',this.Merchant)
      await this.getInfo()
    }
  },

  created() {
    this.getInfo()
  }




}
</script>

<style lang="less" scoped>

.info-pos{
  margin: 0 auto;
  width: 600px;
  height: 400px;
  border: 50px solid white;

}

.btn {
  margin: 10px 0px;
}



</style>
